<!DOCTYPE html>
<html>

<head>
    <title>海绵城市-Demo</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name='viewport' content='width=device-width,user-scalable=no'>
    <!-- <script src="https://cdn.bootcss.com/FileSaver.js/1.3.3/FileSaver.min.js"></script> -->
    <style>
    html,
    body {
        padding: 0px;
        margin: 0px;
    }

    .formpane {
        top: 10px;
        right: 10px;
        /* background: rgba(230, 230, 230, 0.85); */
    }

    .railLine {
        top: 10px;
        left: 10px;
        width: 170px;
        height: 200px;
    }
    </style>
    <script src="script/ht.js"></script>
    <script type="text/javascript">
    dm = new ht.DataModel()
    gv = new ht.graph.GraphView(dm);
    gv.setSelectableFunc(function() { return false; })
    arr = [{
        label: 'H',
        image: 'json/H.json'
    }];

    function init() {
                var s = 80;
                arr.forEach(function(obj, index) {
                    var text = obj.label;
                    name = 't' + text;
                    window[name] = createNode(obj.image, 100+s*index, 100);
                });

                animateIn();
                gv.addToDOM();

                var link = document.createElement('a');
                link.href = 'http://hightopo.com/';

                var img = document.createElement('img');
                img.src = 'symbols/logo.png';
                img.style.width = '130px';

                link.appendChild(img);
                document.body.appendChild(link);
                link.style.position = 'absolute';
            }

            function animateLetterIn(node, i) {
                setTimeout(function() {
                    setSize(node);
                }, i * 200);

                if(i === arr.length - 1) {
                    setTimeout(function() {
                        animateOut();
                    }, (arr.length + 3) * 200);
                }
            }

            function animateIn() {
                arr.forEach(function(obj, index) {
                    var text = obj.label;
                    var name = 't' + text;
                    animateLetterIn(window[name], index);
                });
            }

            function animateLetterOut(node, i) {
                setTimeout(function() {//如果这个函数放在 animateOut 中，那么会导致 i 的取值为最后一个值，
                    zoomSize(node);
                }, i * 200);

                if(i === arr.length - 1) {
                    setTimeout(function() {
                        animateIn();
                    }, (arr.length + 3) * 200);
                }
            }

            function animateOut() {
                arr.forEach(function(obj, index) {
                    var text = obj.label;
                    var name = 't' + text;
                    animateLetterOut(window[name], index);
                });
            }

            function setSize(node) {
                if(node) {
                    var s = 80,
                        size = node.getSize().width;
                    var sw = s - size;
                    var op = 1;
                        opacity = node.a('text.opacity');
                    var sOpacity = op - opacity;
                    ht.Default.startAnim({
                        duration: 1000,
                        easing: function(t) {return t*t},
                        action: function(v, t) {
                            node.setSize(
                                size + sw*v,
                                size + sw*v
                            );
                            node.a('text.opacity', opacity + sOpacity*v);
                        }
                    });
                }
            }

            function zoomSize(node) {
                if (node) {
                    var s = 0,
                        size = node.getSize().width;
                    var sw = size - s;
                    var op = 0,
                        opacity = node.a('text.opacity');
                    var sOpacity = opacity - op;

                    ht.Default.startAnim({
                        duration: 1000,
                        action: function(v, t) {
                            node.setSize(
                                size - size*v,
                                size - size*v
                            );
                            node.a('text.opacity', opacity - sOpacity*v)
                        }
                    });
                }
            }

            function createNode(image, x, y) {
                var node = new ht.Node();
                node.setSize(0, 0);

                if (image) node.setImage(image);
                if (x && y) node.setPosition(x, y);

                dm.add(node);
                return node;
            }

    </script>
</head>

<body onload="init()">
</body>

</html>